<template>
  <!-- 主机查看详情对话框 -->
  <el-dialog
    v-if="reptileDetailDialogVisible"
    :visible.sync="reptileDetailDialogVisible"
    top="70px"
    width="50%"
    @opened="opened()"
    :before-close="closeDialog"
  >
    <span class="main">
      <!-- 爬虫基本信息 -->
      <div class="info reptileInfo">
        <div class="infoTitle">
          <i class="el-icon-info"></i>
          <h4>{{ $t("reptileDialog.title.info") }}</h4>
        </div>
        <div class="infoContent">
          <div>
            <b>{{ $t("reptileDialog.form.cn_name") }}</b
            >：<span>{{ reptileDetailInfo.reptile.cn_name }}</span>
          </div>
          <div>
            <b>{{ $t("reptileDialog.form.en_name") }}</b
            >：<span>{{ reptileDetailInfo.reptile.en_name }}</span>
          </div>
          <div>
            <b>{{ $t("reptileDialog.form.category") }}</b
            >：<span>{{ reptileDetailInfo.reptile.site_category }}</span>
          </div>
          <div>
            <b>URL</b>：<span>{{ reptileDetailInfo.reptile.target_url }}</span>
          </div>
          <div>
            <b>{{ $t("reptileDialog.form.intro") }}</b
            >：<span>{{ reptileDetailInfo.reptile.website_introduction }}</span>
          </div>
          <div>
            <b>{{ $t("reptileDialog.form.webpage") }}</b
            >：<span>{{ reptileDetailInfo.reptile.sample_webpage }}</span>
          </div>
        </div>
        <el-collapse style="margin-left: 20px">
          <el-collapse-item :title="$t('reptileDialog.form.all')">
            <div>
              <b>{{ $t("reptileDialog.form.cn_name") }}</b
              >：<span>{{ reptileDetailInfo.reptile.cn_name }}</span>
            </div>
            <div>
              <b>{{ $t("reptileDialog.form.en_name") }}</b
              >：<span>{{ reptileDetailInfo.reptile.en_name }}</span>
            </div>
            <div>
              <b>{{ $t("reptileDialog.form.category") }}</b
              >：<span>{{ reptileDetailInfo.reptile.site_category }}</span>
            </div>
            <div>
              <b>URL</b>：<span>{{
                reptileDetailInfo.reptile.target_url
              }}</span>
            </div>
            <div>
              <b>{{ $t("reptileDialog.form.webpage") }}</b
              >：<span>{{ reptileDetailInfo.reptile.sample_webpage }}</span>
            </div>
            <div>
              <b>{{ $t("reptileDialog.form.descript") }}</b
              >：<span>{{ reptileDetailInfo.reptile.description }}</span>
            </div>
            <div>
              <b>{{ $t("reptileDialog.form.version") }}</b
              >：<span>{{ reptileDetailInfo.reptile.current_version }}</span>
            </div>
            <div>
              <b>{{ $t("reptileDialog.form.auth") }}</b
              >：<span>{{ reptileDetailInfo.reptile.auth }}</span>
            </div>
            <!-- <div><b>电话/邮箱</b>：<span>1125189111@qq.com</span></div> -->
            <div>
              <b>{{ $t("reptileDialog.form.rely") }}</b
              >：<span>{{ reptileDetailInfo.reptile.dependent_file }}</span>
            </div>
            <div>
              <b>{{ $t("reptileDialog.form.intro") }}</b
              >：<span>{{
                reptileDetailInfo.reptile.website_introduction
              }}</span>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <!-- 节点信息 -->
      <div class="info deviceInfo">
        <div class="infoTitle">
          <i class="el-icon-info"></i>
          <h4>{{ $t("reptileDialog.title.node") }}</h4>
        </div>
        <div>
          <el-table border :data="nodeInfoList" max-height="300px">
            <el-table-column
              type="index"
              :label="$t('reptileDialog.table.index')"
              width="50"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              :label="$t('reptileDialog.table.hostName')"
            >
            </el-table-column>
            <el-table-column prop="ip" label="IP"> </el-table-column>
            <el-table-column
              prop="description"
              :label="$t('reptileDialog.form.descript')"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 参数设置 -->
      <!-- <div class="info">
        <div class="infoTitle">
          <i class="el-icon-info"></i>
          <h4>参数设置</h4>
        </div>
        <div class="aboutTaskList"></div>
      </div> -->
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">{{
        $t("reptileDialog.btn.close")
      }}</el-button>
      <!-- <el-button type="primary" @click="closeDialog">确 定</el-button> -->
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ["reptileDetailDialogVisible", "reptileDetailInfo"],
  data() {
    return {
      nodeInfoList: [],
    };
  },
  methods: {
    opened() {
      // this.$nextTick(() => {
      //   console.log(this.reptileDetailInfo);
      // });
      // console.log(this.reptileDetailInfo.reptile.site_category);
      console.log(this.reptileDetailInfo);
      this.nodeInfoList = this.reptileDetailInfo.client;
    },
    // 关闭弹出框
    closeDialog() {
      this.$emit("closeDialog");
    },
  },
};
</script>

<style lang='less' scoped>
.main {
  overflow-x: hidden;
  overflow-y: scroll;
  display: block;
  margin-top: -20px;
  // height: 640px;
  &::-webkit-scrollbar {
    display: none;
  }
  .info {
    margin-top: 20px;
    .infoTitle {
      display: flex;
      margin-bottom: 10px;
      h4 {
        font-size: 18px;
        line-height: 14px;
      }
    }
    .infoContent {
      display: flex;
      flex-wrap: wrap;
      padding-left: 16px;
      div {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 10px;
        width: 30%;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
      }
    }
  }
}
</style>